<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="yes" name="apple-touch-fullscreen">
		<meta content="telephone=no,email=no" name="format-detection">
		<meta name="divport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<title>拼图游戏</title>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<script src="js/rem.js"></script>
	</head>
	<body>
		<div class="container">
		    <div class="inner">
		        <img class="rule" src="images/rule.png" onclick="showMask(3)"/>
		        <div class="centerBox">
		            <img class="img1" src="images/a1.png"/>
		            <div class="startBtn"></div>
		        </div>
		        <div class="btnBox">
		            <img class="hbBtn" src="images/hb.png" onclick="showMask(1)"/>
		            <img class="bdBtn" src="images/bd.png" onclick="showMask(2)"/>
		        </div>
		    </div>
		    <img class="bottomLogo" src="images/a2.png"/>
		</div>
		<!-- 我的红包 -->
		<div class="mask mask1">
		    <div class="hbBox dropDownStart">
		        <img class="hbbg" src="images/hbBg.png"/>
		        <img class="hbtit" src="images/t1.png"/>
		        <div class="title">
		            <span>好友昵称</span>
		            <span>红包金额</span>
		        </div>
		        <div class="list">
		           <ul id="myhblist">
		           </ul>
		            <div class="nodata myhblist_nodata" style="display: none;">
		                <span>春风十里</span>
		                <span>红包在游戏中等你</span>
		            </div>
		        </div>
		        <img class="close" src="images/close.png"/>
		        <img class="playBtn" src="images/a3.png" style="display: none;"/>
		    </div>
		</div>
		<!-- 游戏榜单+红包榜单 -->
		<div class="mask mask2">
		    <div class="bdMask dropUpStart">
		        <div class="bdBox">
		            <img class="bg" src="images/a5.png"/>
		            <img class="close" src="images/close.png"/>
		            <div class="tab">
		                <img class="bgtit cur" src="images/t2.png"/>
		                <img class="bgtit" src="images/t3.png"/>
		            </div>
		            <div class="tabBd">
		                <div class="bdOut">
		                	<div class="title">
		                	    <span>排名</span>
		                	    <span>昵称</span>
		                	    <span class="time">用时</span>
		                	</div>
		                	<div class="list">
		                		<ul id='phlist'>
		                		</ul>
		                	</div>
		                			            
		                </div>
						<div class="hbOut" style="display: none;">
							<div class="title">
							    <span>排名</span>
							    <span>昵称</span>
							    <span class="time">红包金额</span>
							</div>
							<div class="list">
								<ul id="hblist">
								</ul>
							</div>
						</div>
					</div>
		            
		        </div>
				<div class="wsbBox">
					<div class="memBox">
					    <img class="bg" src="images/a4.png"/>
					    <ul class="list" id="myRankPh">
					    </ul>
					</div>
					<div class="memBox" style="display: none;">
					    <img class="bg" src="images/a4.png"/>
					    <ul class="list" id="myRankHb">
					    	
					    </ul>
					</div>
				</div>
		    </div>
		</div>
		
		<!-- 活动规则 -->
		<div class="mask mask3">
		    <div class="ruleBox dropDownStart">
		        <img class="bg" src="images/a10.png"/>
		        <img class="title" src="images/a9.png"/>
		        <img class="close" src="images/a8.png" bind:tap="closeTan" data-type="rule"/>
		        <div class="text">
		            <div class="li">
		                <img class="icon" src="images/i4.png"/>
		                <div class="txt">
		                    本次活动截止日期为
		                    <span class="red">2月17日24点</span>
		                </div>
		            </div> 
		            <div class="li">
		                <img class="icon" src="images/i5.png"/>
		                <div class="txt">
		                    活动期间，参与拼图游戏通关即有机会拆红包。
		                </div>
		            </div> 
		            <div class="li">
		                <img class="icon" src="images/i6.png"/>
		                <div class="txt">
		                    通关获得的红包将以红包形式发送您的微信零钱。
		                </div>
		            </div>
		            <div class="li">
		                <img class="icon" src="images/i7.png"/>
		                <div class="txt">
		                    游戏活动最终解释权归北京联合易网网络技术开发有限公司所有。
		                </div>
		            </div>
		        </div>
		    </div>
		</div>
		
		<script src="js/jquery-3.5.1.min.js"></script>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
		<script src="js/public.js"></script>
		<script src="layer/layer.js"></script>
		<script>
			
			function showMask(num){
				$(".container").addClass("blur")
				$(".mask"+num).addClass("maskShow");
				setTimeout(() => {
				    $(".dropDownStart").addClass("dropDown")
				    $(".dropUpStart").addClass("dropUp")
				}, 10);
				
			}
			function hideMask(num){
				$(".container").removeClass("blur")
				$(".mask"+num).removeClass("maskShow");
				$(".dropDownStart").removeClass("dropDown")
				$(".dropUpStart").removeClass("dropUp")
			}
			$(".close").click(function(){
				$(".container").removeClass("blur")
				$(".mask").removeClass("maskShow");
				$(".dropDownStart").removeClass("dropDown")
				$(".dropUpStart").removeClass("dropUp")
			})
			$(".bgtit").click(function(){
				var i = $(this).index();
				$(this).addClass("cur").siblings().removeClass("cur");
				$(".tabBd>div").eq(i).show().siblings().hide();
				$(".wsbBox>div").eq(i).show().siblings().hide();
			})
			
			
			$(".startBtn").click(function(){
				window.location.href = 'puzzle.html'
			})
		</script>
		<script>
			var index = layer.load(1, {
				shade: [1,'#000'] //0.1透明度的白色背景
			});
			document.onreadystatechange = loadingChange;//当页面加载状态改变的时候执行这个方法.
			function loadingChange() { 
				if(document.readyState == "complete"){ //当页面加载状态为完全结束时进入 
					layer.close(index)
				} 
			} 
			
			if(openid==''||openid==undefined){
				getWxopenid();
			}else{
				getToken();
			}
			
			
			function getWxopenid() {
				if (code == "" || code == undefined || code == null) {
					var thisUrl = window.location.href;
					thisUrl = encodeURIComponent(thisUrl);
					var theWx = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=";
					var url = theWx + thisUrl + "&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect";
					window.location.href = url;
				} else {
					getOpenid();
				}
			}
			function getOpenid(){
				var aJson = {
					'jsCode': code,
				};
				$.ajax({
					url: host+'/time/loginGame',
					method: 'POST',
					dataType: 'json',
					contentType:'application/json',
					data: JSON.stringify(aJson),
					success: function(res) {
						if (res.code == '01') {
							openid = res.data.openid;
							vxImgUrl = res.data.headimgurl;
							vxName = Base64.encode(res.data.nickname);
							setCookie("openid", openid, '');
							setCookie("vxImgUrl", vxImgUrl, '');
							setCookie("vxName", vxName, '');
							getToken();
						}else{
							layer.msg(res.message)
							
						}
					}
				});
			}
			function getToken(){
				var aJson = {
					'vxId': openid,
					'vxName': vxName,
					'vxImgUrl':vxImgUrl
				};
				$.ajax({
					url: host+'/time/createToken',
					method: 'POST',
					dataType: 'json',
					contentType:'application/json',
					data: JSON.stringify(aJson),
					success: function(res) {
						if(res.code=='01'){
							token = res.data;
							setCookie("token", res.data, 1);
							getmyhbList();
							gethbList();
							phlist();
						}else{
							layer.msg(res.message)
						}
					}
				});
			}
			
			//我的红包列表
			function getmyhbList(){
				var aJson = {'vxId': openid, 'token': token }
				
				$.ajax({
					url: host+'/time/getMyMoney',
					method: 'POST',
					dataType: 'json',
					contentType:'application/json',
					data: JSON.stringify(aJson),
					success: function(res) {
						if(res.code == '01'){
							if(res.data.length>0){
								var html = '';
								var data = res.data;
								for (i = 0; i < data.length; i++) {
									html+='<li><div class="left"><img class="pic" src="'+data[i].vxImgUrl+'"/>'
									html+='<span>'+Base64.decode(data[i].vxName)+'</span></div>'
									html+='<div class="price"><span>'+data[i].redMoney+'</span>元</div></li>'
								}
								$("#myhblist").html(html)
							}else{
								$(".myhblist_nodata").show();
							}
						}else{
							layer.msg(res.message)
						}
						
					}
				});
			}
			//红包榜单列表
			function gethbList(){
				var aJson = {'vxId': openid, 'token': token }
				$.ajax({
					url: host+'/time/getMoneyRanking',
					method: 'POST',
					dataType: 'json',
					contentType:'application/json',
					data: JSON.stringify(aJson),
					success: function(res) {
						if(res.code=='01'){
							if(res.data.rtnList.length>0){
								var html = '';
								var data = res.data.rtnList;
								for (i = 0; i < data.length; i++) {
									html+='<li>'
									if(i==0){
										html+='<img class="icon" src="images/i1.png"/>'
									}else if(i==1){
										html+='<img class="icon" src="images/i2.png"/>'
									}else if(i==2){
										html+='<img class="icon" src="images/i3.png"/>'
									}else{
										html+='<div class="num">'+(parseInt(i)+1)+'</div>'
									}
									
									html+='<div class="center"><img class="pic" src="'+data[i].vxImgUrl+'"/>'
									html+='<span>'+Base64.decode(data[i].vxName)+'</span></div>'
									html+='<div class="price"><div class="txt"><span>'+data[i].redMoney+'</span>元</div></div></li>'
								}
								$("#hblist").html(html)
							}
							
							if(res.data.myRank){
								var myRank = res.data.myRank
								var html2 = ''
								html2 +='<li>'
								if(myRank.isRank){
									html2 +='<div class="num">第'+myRank.number+'名</div>'
								}else{
									html2 +='<div class="num">未上榜</div>'
								}
								html2+='<div class="center">'
								html2+='<img class="pic" src="'+myRank.vxImgUrl+'"/><span>我</span></div>'
								html2+='<div class="price"><div class="txt"><span>'+myRank.redMoney+'</span>元</div></div></li>'
								$("#myRankHb").html(html2)
							}else{
								var html3 = '<li><div class="num" style="width:100%;text-align:center;">你还没有抽过红包哦~</div></li>'
								$("#myRankHb").html(html3)
							}
							
						}else{
							layer.msg(res.message)
						}
						
					}
				});
			}
			//游戏排行
			function phlist(){
				var aJson = {'vxId': openid, 'token': token }
				$.ajax({
					url: host+'/time/getTimeRanking',
					method: 'POST',
					dataType: 'json',
					dataType: 'json',
					contentType:'application/json',
					data: JSON.stringify(aJson),
					success: function(res) {
						if(res.code=='01'){
							if(res.data.rtnList.length>0){
								var html = '';
								var data = res.data.rtnList;
								for (i = 0; i < data.length; i++) {
									html+='<li>'
									if(i==0){
										html+='<img class="icon" src="images/i1.png"/>'
									}else if(i==1){
										html+='<img class="icon" src="images/i2.png"/>'
									}else if(i==2){
										html+='<img class="icon" src="images/i3.png"/>'
									}else{
										html+='<div class="num">'+(parseInt(i)+1)+'</div>'
									}
									
									html+='<div class="center"><img class="pic" src="'+data[i].vxImgUrl+'"/>'
									html+='<span>'+Base64.decode(data[i].vxName)+'</span></div>'
									html+='<div class="time"><img class="bg" src="images/a6.png"/><div class="txt"><span>'+data[i].gameTime+'</span>秒</div></div></li>'
								}
								$("#phlist").html(html)
							}
							if(res.data.myRank){
								var myRank = res.data.myRank
								var html2 = ''
								html2 +='<li>'
								if(myRank.isRank){
									html2 +='<div class="num">第'+myRank.number+'名</div>'
								}else{
									html2 +='<div class="num">未上榜</div>'
								}
								html2+='<div class="center">'
								html2+='<img class="pic" src="'+myRank.vxImgUrl+'"/><span>我</span></div>'
								html2+='<div class="time"><img class="bg" src="images/a7.png"/>'
								html2+='<div class="txt"><span>'+myRank.gameTime+'</span>秒</div></div></li>'
								
									
								$("#myRankPh").html(html2)
							}else{
								var html3 = '<li><div class="num" style="width:100%;text-align:center;">你还没有玩游戏哦~</div></li>'
								$("#myRankPh").html(html3)
							}
						}else{
							layer.msg(res.message)
						}
						
					}
				});
			}
			
		</script>
		<script src="js/share.js"></script>
	</body>
</html>
